use crate::components::enums::PromptLevel;
use ratatui::{Frame, prelude::*, widgets::*};

/// 弹窗函数。这个很精妙，很能体现ratatui的理念
pub fn ui(f: &mut Frame, level: PromptLevel, title: &str, content: &str) {
    let popup_area = centered_rect(60, 20, f.area());

    // 1. 创建文本 Widget (不再需要 .block() 了，因为我们会分开渲染)
    let text = Paragraph::new(content)
        // 注意这里，如果对一个高度超过1的rect直接让他Alignment::center，是不会垂直居中的，它只会在第一行居中。为了让它水平垂直居中，得放多个rect，然后对中间那个rect操作水平
        .alignment(Alignment::Center) // 水平居中
        .style(Style::default().fg(Color::White))
        .wrap(Wrap { trim: true });

    let block_color = level.get_color();
    // 2. 创建边框/容器 Widget
    let block = Block::default()
        .title(title)
        .title_alignment(Alignment::Center)
        .borders(Borders::ALL)
        .border_type(BorderType::Double)
        .border_style(Style::default().fg(block_color));

    // 3. 在弹窗区域内创建一个新的垂直布局，用于垂直居中文本
    //    我们把它切成三块：上边距、文本区(高度为1)、下边距
    //    Constraint::Fill(1) 会让上下边距平分剩余空间
    let text_area = Layout::default()
        .direction(Direction::Vertical)
        .constraints([
            Constraint::Fill(1),   // 上边距
            Constraint::Length(1), // 我们的文本区域，只有一行高
            Constraint::Fill(1),   // 下边距
        ])
        .split(popup_area)[1]; // 我们只取中间那个 Rect

    // 4. 按顺序渲染
    f.render_widget(Clear, popup_area); // 先清空整个弹窗区域
    f.render_widget(block, popup_area); // 然后在整个区域画上边框
    f.render_widget(text, text_area); // 最后，在计算好的、垂直居中的小区域里画上文本
}

/// 画一个垂直居中的rect。percent_x: 横轴占据百分比，percent_y：纵轴占据百分比
fn centered_rect(percent_x: u16, percent_y: u16, r: Rect) -> Rect {
    // 原理就是先纵向切3块，但是取中间那块. 3块的纵轴占比分别是：(100 - percent_y) / 2 , percent_y, (100 - percent_y) / 2
    let popup_layout_vertical = create_rects(Direction::Vertical,percent_y).split(r);
    // 然后再横向切3块，也取中间那块 3块的横轴占比分别是：(100 - percent_x) / 2 , percent_x, (100 - percent_x) / 2
    let popup_layout = create_rects(Direction::Horizontal,percent_x).split(popup_layout_vertical[1]);
    popup_layout[1]
}

fn create_rects(direction: Direction, percent: u16) -> Layout{
    Layout::default()
        .direction(direction)
        .constraints([
            Constraint::Percentage((100 - percent) / 2),
            Constraint::Percentage(percent),
            Constraint::Percentage((100 - percent) / 2),
        ])
}
